import React, { Component } from 'react'
import Tabtitle from './Tabtitle'
import Tabcon from './Tabcon'
import axios from "axios"


export class Main extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
           list:[],
           active:'',
        }
      }
      componentDidMount() { 
        axios.get("/list").then(res=>{
            this.setState({
              list:res.data,
              active:res.data[0].id
    
            })
        })    
       }
       tab(id){
         let {list, active}=this.state
         list.forEach((item)=>{
             if(item.id==id){
                 active=item.id
             }
         })
         this.setState({
            active:active
        })
       }
       del(id){
           let {list}=this.state
           let listid= list.filter((item)=>{
              return item.id!==id
           })
           this.setState({
               list:listid
           })

       }
       add(){
           let {list}=this.state
           list.push({
               id:new Date()*1,
               title:"新title",
               con:"newcon"

           })
           this.setState({
               list
           })
       }

  render() {
    const { list,active,del}=this.state

    return (
      <div>
          <Tabtitle list={list} active={active} tab={this.tab.bind(this)}
           add={this.add.bind(this)} del={this.del.bind(this)}></Tabtitle>
          <Tabcon list={list }  active={active}></Tabcon>
      </div>
    )
  }
}

export default Main